{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}外卖订餐系统{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <style>
        :root {
            --primary-color: #ff4757;
            --secondary-color: #2f3542;
            --success-color: #2ed573;
            --bg-light: #f8f9fa;
        }
        
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background-color: var(--bg-light);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            background-color: var(--secondary-color) !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            color: var(--primary-color) !important;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .nav-link {
            color: #fff !important;
            transition: color 0.3s;
        }

        .nav-link:hover {
            color: var(--primary-color) !important;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: #ff6b81;
            border-color: #ff6b81;
        }

        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }

        .footer {
            margin-top: auto;
            background-color: var(--secondary-color);
            color: #fff;
            padding: 1.5rem 0;
        }

        .page-container {
            flex: 1;
            padding: 2rem 0;
        }

        /* 自定义动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out;
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255,71,87,.3);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 表单样式 */
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(255,71,87,.25);
        }

        /* 警告提示样式 */
        .alert {
            border: none;
            border-radius: 8px;
        }

        /* 徽章样式 */
        .badge {
            padding: 0.5em 1em;
            border-radius: 20px;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="{% url 'users:home' %}">
                <i class="fas fa-utensils me-2"></i>外卖订餐系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'order:restaurant_list' %}">
                            <i class="fas fa-store me-1"></i>餐厅列表
                        </a>
                    </li>
                    {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'order:order_list' %}">
                                <i class="fas fa-clipboard-list me-1"></i>我的订单
                            </a>
                        </li>
                    {% endif %}
                </ul>
                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'users:profile' %}">
                                <i class="fas fa-user me-1"></i>{{ user.username }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'users:logout' %}">
                                <i class="fas fa-sign-out-alt me-1"></i>退出
                            </a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'login' %}">
                                <i class="fas fa-sign-in-alt me-1"></i>登录
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'users:register' %}">
                                <i class="fas fa-user-plus me-1"></i>注册
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="page-container">
        <div class="container animate-fade-in">
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
            {% block content %}{% endblock %}
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center text-md-start">
                    <h5>联系我们</h5>
                    <p><i class="fas fa-envelope me-2"></i>Email: support@takeout.com</p>
                    <p><i class="fas fa-phone me-2"></i>电话: 400-123-4567</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <h5>关注我们</h5>
                    <div class="social-links">
                        <a href="#" class="text-white me-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-qq fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <hr class="mt-4 mb-4">
            <div class="text-center">
                <p class="mb-0"> 2024 外卖订餐系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap Bundle JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script>
        // 添加页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            document.body.classList.add('loaded');
        });

        // 自动隐藏消息提示
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            setTimeout(() => {
                alert.classList.remove('show');
                setTimeout(() => alert.remove(), 150);
            }, 3000);
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>
